基本用法
箭头函数的常见写法
1
2
3
| let fn = ()=>{表达式或语句}；
//箭头左边如果不省略的话就是一个小括号，用来写形参的地方；
//箭头的右边就是写表达式或者语句的地方
|
1.左边小括号的用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| //箭头左边的括号问题
//没有参数的时候：()是不能省略的
let fn = () => {
console.log(123);
}
fn();
//只有一个参数的时候:()可以省略
let fn1 = a =>{
console.log(a);
}
fn1(3);
//两个或两个以上的参数时,()不能省略
let fn2 = (a,b) =>{
console.log(a,b);
}
fn2(4,5);//4,5
|
2.右边函数体的用法
函数体不用大括号: 默认返回结果；
函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回；
1
2
3
4
5
6
7
8
| //箭头右边的表达式语句
// 当只有一条语句或者是表达式时，{}可以省略不写，省略不写的时候，会自动返回结果
let fn3 = (a,b) => a+b;
console.log(fn3(6,7));//13
//当函数体不止一条语句或者表达式的时候，{}不能省略，手动返回想要的结果
let fn4 = (a,b) => {return a*b};
console.log(fn4(3,5));//15
|
3.箭头函数的this
1.箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this.
2.扩展理解：箭头函数的this看外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this；如果没有，则this是window。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| let obj = {
username :'kobe',
getName1: function () {
btn1.onclick = () =>{
console.log(this);//obj
}
},
getName2: () => {
btn2.onclick = () =>{
console.log(this);
}
}
}
/*等价的理解；
* obj.getName1 = function () {
btn1.onclick = () =>{
console.log(this);//obj
}
}
* obj.getName2 = () => {
btn2.onclick = () =>{
console.log(this);//window
}
}
* */
obj.getName1();
obj.getName2();
|
